<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>资源列表</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="${webroot}/www/admin/css/page-main.css" rel="stylesheet">
<link href="//cdn.bootcss.com/limonte-sweetalert2/6.4.2/sweetalert2.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/limonte-sweetalert2/6.4.2/sweetalert2.min.js"></script>
<!--bootstrap-notify-->
<script src="//cdn.bootcss.com/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="http://${host}/www/admin/js/blog.js"></script>
<script src="${webroot}/www/blog/js/pub/blog-alert.js"></script>
<link href="//cdn.bootcss.com/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/fancybox/2.1.6/css/jquery.fancybox.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/fancybox/2.1.6/js/jquery.fancybox.min.js"></script>
<script src="//cdn.bootcss.com/zeroclipboard/2.3.0/ZeroClipboard.min.js"></script>
	<style>
		#dropzone {
			margin-bottom: 3rem;    height: 200px;
		}
		.dropzone {
			border: 2px dashed #0087F7;
			border-radius: 5px;
			background: white;
		}
		.dropzone .dz-message {
			font-weight: 400;
		}
		.dropzone .dz-message .note {
			font-size: 0.8em;
			font-weight: 200;
			display: block;
			margin-top: 1.4rem;
		}
		.attach-img {
			width: 100px;
			height: 100px;
			border-radius: 10px;
			box-shadow: 0px 0px 8px #333;
		}
		.attach-text {
			font-size: 12px;
			font-weight: 300;
		}
		.attach-img:hover {
			background-color: #f9f9f9;
		}
	.file-box{    width: 130px;
		/*border: solid 1px gray;*/
		float: left;
		margin: 10px;
		height: 150px;}
	.file-head{max-width: 100px;max-height: 100px;overflow: hidden;min-height: 100px;}
	.file-head img{height: 100px;}
	.file-name{display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;width: 110px;padding: 5px;color: gray;}
	.sbtn{padding: 5px;}
</style>
</head>
<body>
<#include "/admin/include/dashboard-start.ftl">
<div class="row" style="padding: 20px;" >
			<div class="col-md-12 portlets">
				<!-- Your awesome content goes here -->
				<div class="m-b-30">
					<form action="#" class="dropzone" id="dropzone">
						<div class="fallback">
							<input name="file" type="file" multiple="multiple">
						</div>
						<div class="dz-message">
							<p>将文件拖至此处或点击上传.</p>
							<p>
								<span style="font-size: 16px; color: #d0d0d0;">一次最多可以上传10个文件</span>
							</p>
						</div>
					</form>
				</div>
			</div>
		</div>
<div class="row" style="padding: 20px;">
	<div class="row" style="padding-left: 25px;" >
		<form class="form-inline" method="post" action="blogres_list.do"  id="sform">
			<div class="form-group">
				<input type="text" value="${resname!}" name="resname" class="form-control" id="keyword_txt" placeholder="关键字">
			</div>
			<div class="btn-group">
				<button type="submit" class="btn btn-default" data-toggle="tooltip" title="根据您输入的关键字进行查询" data-placement="bottom">
					<span class="glyphicon glyphicon-search"></span>&nbsp;查询</button>
				<button type="button" class="btn btn-default" onclick="fundel();" data-toggle="tooltip" title="删除您选中的资源" data-placement="bottom">
					<span class="glyphicon glyphicon-remove"></span>&nbsp;删除</button>
			</div>
		</form>
	</div>
<@BlogRes page="${page!}"  resname="${resname!}"  websiteid="${AdminWebSite.id}"  limit="10">
 	<#list blogres_lis as res>
		<div class="file-box" id="${res.resKey}">
			<div class="file-head">
				<#if res.resType?contains("image")>
					<a class="fancybox" rel="group" href="http://res.51so.info/${res.resKey}?a.jpg" title="${res.resName}">
						<img class="img-thumbnail" src="http://res.51so.info/${res.resKey}_admin.res.manage"  >
					</a>
					<#else>
						不是图片
				</#if>
			</div>
			<div class="file-name">${res.resName}</div>
			<div>
				<span class="sbtn sbtn-green copy-btn">复制</span>
				<span class="sbtn sbtn-yellow" onclick="rename(this,'${res.id}');">命名</span>
				<span class="sbtn sbtn-red" onclick="delfile('${res.resKey}');">删除</span>
			</div>
	   </div>
   </#list>
</@BlogRes>
</div>
    <#assign url="${admin_blogprefix}/admin/blogres_list.do?resname=${resname!}&">
    <#include "/admin/include/page.ftl">
	<#include "/admin/include/dashboard-end.ftl">
</body>
<script src="//cdn.bootcss.com/dropzone/4.3.0/min/dropzone.min.js"></script>
<script type="text/javascript">
	blogControlPanel.activePanelByText("文件管理");
	var client = new ZeroClipboard( $('.copy-btn') );
	client.on( 'ready', function(event) {
		// console.log( 'movie is loaded' );
		client.on( 'copy', function(event) {
			var imghref=$(event.target).parent().parent().find("a[class='fancybox']").attr("href");
			event.clipboardData.setData('text/plain', imghref);
		} );

		client.on( 'aftercopy', function(event) {
			console.log('Copied text to clipboard: ' + event.data['text/plain']);
			blogAlert.notify("复制成功","success");
		} );
		client.on( 'error', function(event) {
			ZeroClipboard.destroy();
		} );
	});


$(function () {
	$("[data-toggle='tooltip']").tooltip();
		//$('.file-head img').viewer();
		$(".fancybox").fancybox({titlePosition:'outside',transitionIn:'elastic',transitionOut:'elastic'});
	});

function fundel(){
	var chks=getCheckItems();
	if(chks.length==0){blogAlert.alert("请选择要删除的资源","red");return;}

}
function delfile(chks){
	var ids;
	if(chks instanceof Array){
		ids=chks;
	}else{
		ids=new Array();
		ids.push(chks);
	}
	blogAlert.confirm('你确定要删除选中记录吗？', function(result){
		if(result){
			$.ajax({
				type: "post",
				url: "${admin_blogprefix}/admin/del_blogres.do",
				data: {keys:ids},
				dataType:'json',
				success: function(data){
					blogAlert.notify("成功删除："+data.affected+"条","success");
					$('#'+ids[0]).remove();
				}
			});
		}
	});

}


function rename(obj,id){
	var name=$(obj).parent().parent().find('.file-name').text();
	blogAlert.prompt("重命名","text",name,function(result){
		if(null==result)return;
		$.ajax({
			type: "post",
			url: "${admin_blogprefix}/admin/res_rename.do",
			data: {id:id,name:result},
			//dataType:'json',
			success: function(data){
				$('body').hideLoading();
				if(data=="success"){
					blogAlert.notify("操作成功！","success");
					$(obj).parent().parent().find('.file-name').text(result)
				}else{
					blogAlert.error("操作失败..",data);
				}
			}
		});
	});
}

	Dropzone.autoDiscover = false;
	$("#dropzone").dropzone({
		url: "${webroot}/admin/article_uploadImg.do?action=uploadfile", //必须填写
		method:"post",  //也可用put
		paramName:"file", //默认为file
		maxFiles:10,//一次性上传的文件数量上限
		maxFilesize: 20, //MB
		acceptedFiles: ".jpg,.gif,.png", //上传的类型
		//previewsContainer:"#adds", //显示的容器
		parallelUploads: 3,
		dictMaxFilesExceeded: "您最多只能上传10个文件！",
		dictResponseError: '文件上传失败!',
		dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.jpg,*.gif,*.png。",
		dictFallbackMessage:"浏览器不受支持",
		dictFileTooBig:"文件过大上传文件最大支持.",
		//previewTemplate: document.querySelector('#preview-template').innerHTML,//设置显示模板
		init:function(){
			$(this.element).addClass("dropzone");
			this.on("addedfile", function(file) {
				//上传文件时触发的事件
				console.info("addedfile"+file);
			});
			this.on("queuecomplete",function(file) {
				//上传完成后触发的方法
				console.info("queuecomplete"+file);
			});
			this.on("removedfile",function(file){
				//删除文件时触发的方法
				console.info("removedfile"+file);
			});
		}
	});
</script>
</html>